<template>
    <div class="" style="margin: 15px 0 0 15px;">
        <el-row>
            <el-col :span="23">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">登录页</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/main/statistics">数据大屏</a></el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/main/statistics">简约风格</a></el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>
        <div class="container" style="width: 93vw;margin-left: 0 auto;">
            <div class="header">
                <h1>可视化大屏</h1>
                <p>业务指标与数据分析</p>
            </div>

            <div class="stats-bar">
                <div class="stat-card">
                    <div class="stat-label">今日销售额 <br><el-tag type="success">
                            <div>↑12.5% 同比昨日</div>
                        </el-tag>
                    </div>
                    <div class="stat-value">¥256,890</div>



                    <div class="stat-label">今日销售额 <br><el-tag type="success">
                            <div>↑12.5% 同比昨日</div>
                        </el-tag>
                    </div>
                    <div class="stat-value">¥256,890</div>


                   <div class="stat-label">今日销售额 <br><el-tag type="success">
                            <div>↑12.5% 同比昨日</div>
                        </el-tag>
                    </div>
                    <div class="stat-value">¥256,890</div>

                    <div class="stat-label">今日销售额 <br><el-tag type="success">
                            <div>↑12.5% 同比昨日</div>
                        </el-tag>
                    </div>
                    <div class="stat-value">¥256,890</div>
                </div>
            </div>

            <div class="dashboard">
                <div class="chart-container">
                    <div class="chart-title">年级</div>
                    <div id="chart1" class="chart" ref="myChart"></div>
                </div>

                <div class="chart-container">
                    <div class="chart-title">学生性别统计</div>
                    <div id="chart2" class="chart" ref="myChart2"></div>
                </div>

                <div class="chart-container">
                    <div class="chart-title">商品单位统计</div>
                    <div id="chart3" class="chart" ref="myChart3"></div>
                </div>

                <div class="chart-container">
                    <div class="chart-title">商品统计（根据商品单位）</div>
                    <div id="chart4" class="chart" ref="myChart4"></div>
                </div>

                <div class="chart-container">
                    <div class="chart-title">商品统计（根据商品单位）</div>
                    <div id="chart1" class="chart" ref="myChart5"></div>
                </div>
            </div>
            <div class="footer">
                <p>数据更新时间: 2023年11月15日 15:45:32</p>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme

export default {
    name: 'StatisticsPage',
    data() {
        return {
            sex_data: {
                title: "性别占比",
                name: "性别",
                data: []
            },
            grade_data: {
                title: "年级统计",
                name: ["年级"],
                gradeList: [],
                xAxisList: [],
            },
            bills_data: {
                title: "商品单位统计",
                name: ["单位"],
                data: [],
            },
            billsUnit_data: {
                title: "商品统计（根据商品单位）",
                name: ["商品名称"],
                productCountList: [],
                productUnitList: [],
                totalPriceList: [],
                productCountUnitList: []
            },
        };
    },
    mounted: function () {
        this.initChart();
        this.initChart2();
        this.initChart3();
        this.initChart4();
        this.getSexStatistics();
        this.getGradeStatistics();
        this.getBillsStatistics();
    },
    methods: {

        getBillsStatistics() {
            let bills_list = []
            this.$axios.get('http://127.0.0.1:8082/statistics/getBillsStatistics')
                .then(response => {
                    console.log("bills_data!!!!:", response.data.data)
                    bills_list = response.data.data
                    for (var i = 0; i < bills_list.length; i++) {
                        let item = {
                            value: bills_list[i].productUnitCount,
                            name: bills_list[i].productUnit,
                        }
                        this.bills_data.data.push(item)
                    }
                    for (var j = 0; j < bills_list.length; j++) {
                        this.billsUnit_data.productCountList.push(bills_list[j].productCount)
                        this.billsUnit_data.productUnitList.push(bills_list[j].productUnit)
                        this.billsUnit_data.totalPriceList.push(bills_list[j].totalPrice)
                        this.billsUnit_data.productCountUnitList.push(bills_list[j].productUnitCount)
                    }
                    console.log("bills_data:", this.bills_data)
                    this.initChart3();
                    this.initChart4();
                    this.initChart5();
                    console.log("billsUnit_data:", this.billsUnit_data)
                }).catch(error => {
                    console.log("query failed" + error);
                });
        },

        getGradeStatistics() {
            let grade_list = []
            this.$axios.get('http://127.0.0.1:8082/statistics/getGradeStatistics')
                .then(response => {
                    console.log("grade_data:", response.data.data)
                    grade_list = response.data.data
                    for (var i = 0; i < grade_list.length; i++) {
                        this.grade_data.xAxisList.push(grade_list[i].gradeName)
                        this.grade_data.gradeList.push(grade_list[i].stuCount)
                    }
                    this.initChart();
                    console.log("grade_data:", this.grade_data)
                }).catch(error => {
                    console.log("query failed" + error);
                });
        },

        getSexStatistics() {
            let sex_list = []
            let sex_list_new = []
            this.$axios.get('http://127.0.0.1:8082/statistics/getSexStatistics')
                .then(response => {
                    sex_list = response.data.data
                    for (var i = 0; i < sex_list.length; i++) {
                        let item = {
                            value: sex_list[i].stuCount,
                            name: sex_list[i].sex == true ? "男" : "女",
                        }
                        sex_list_new.push(item)
                    }
                    console.log("sex_data:", this.sex_data)
                    this.sex_data.data = sex_list_new;
                    this.initChart2();

                }).catch(error => {
                    console.log("query failed" + error);
                });
        },

        initChart() {
            let myChart = echarts.init(this.$refs.myChart);
            let option = {
                title: {
                    text: this.grade_data.title,
                },
                tooltip: {},
                legend: {
                    data: this.grade_data.name,
                },
                xAxis: {
                    data: this.grade_data.xAxisList,
                },
                yAxis: {},
                series: [
                    {
                        name: this.grade_data.name,
                        type: "bar",
                        data: this.grade_data.gradeList,
                        itemStyle: {
                            color: function (params) {
                                // 根据数据调整颜色
                                var colorList = ['#E6F2FF', '#B0C4DE', '#87CEEB', '#89CFF0', '#6495ED'];
                                return colorList[params.dataIndex]
                            },
                            borderColor: '#000',
                            borderWidth: 1,
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            shadowOffsetX: 3,
                            shadowOffsetY: 3
                        }
                    },
                ],
            };
            myChart.setOption(option);
        },

        initChart2() {
            let myChart = echarts.init(this.$refs.myChart2);
            let option = {
                title: {
                    text: this.sex_data.title,
                },
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    bottom: 10,
                    itemWidth: 12,
                    itemHeight: 12,
                    itemGap: 30,
                    textStyle: {
                        color: "#405B84",
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "10%",
                    containLabel: true,
                },
                color: ["#68A0F7", "#64DEF3", "#40CE66", "#F87F4C"],
                series: [
                    {
                        name: this.sex_data.name,
                        type: "pie",
                        label: {
                            color: "#405B84",
                            formatter: "{b}: {d}%",
                        },
                        data: this.sex_data.data,
                        radius: "65%",
                    },
                ],
            };
            myChart.setOption(option);
        },



        initChart3() {
            let myChart = echarts.init(this.$refs.myChart3);
            const option = {
                title: {
                    text: this.bills_data.title,
                },
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    bottom: 10,
                    itemWidth: 12,
                    itemHeight: 12,
                    itemGap: 30,
                    textStyle: {
                        color: "#405B84",
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "10%",
                    containLabel: true,
                },
                color: ["#68A0F7", "#64DEF3", "#40CE66", "#F87F4C"],
                series: [
                    {
                        name: this.bills_data.name,
                        type: "pie",
                        label: {
                            color: "#405B84",
                            formatter: "{b}: {d}%",
                        },
                        data: this.bills_data.data,
                        radius: ["50%", "70%"],
                    },
                ],
            };
            myChart.setOption(option);
        },
        initChart4() {
            let myChart = echarts.init(this.$refs.myChart4);
            // 指定图表的配置项和数据
            const option = {
                title: {
                    text: this.billsUnit_data.title,
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: this.billsUnit_data.name,
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: this.billsUnit_data.productUnitList, // x轴数据
                },
                yAxis: {
                    type: "value",
                },
                series: [
                    {
                        name: "总条数",
                        type: "line", // 指定为折线图类型
                        stack: "总量", // 堆叠名称，用于堆叠显示数据
                        data: this.billsUnit_data.productCountList, // 数据数组，对应 xAxis 的类目数组长度
                    },
                    {
                        name: "金额",
                        type: "line", // 指定为折线图类型
                        stack: "总额", // 堆叠名称，用于堆叠显示数据
                        data: this.billsUnit_data.totalPriceList, // 数据数组，对应 xAxis 的类目数组长度
                    },
                    {
                        name: "总数量",
                        type: "line", // 指定为折线图类型
                        stack: "总数", // 堆叠名称，用于堆叠显示数据
                        data: this.billsUnit_data.productCountUnitList, // 数据数组，对应 xAxis 的类目数组长度
                    },
                ],

            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        initChart5() {
            let myChart = echarts.init(this.$refs.myChart5);
            let option = {
                title: {
                    text: this.billsUnit_data.title,
                },
                tooltip: {},
                legend: {
                    data: this.billsUnit_data.name,
                },
                xAxis: {
                    data: this.billsUnit_data.productUnitList,
                },
                yAxis: {},
                series: [
                    {
                        name: "总条数",
                        type: "bar",
                        data: this.billsUnit_data.productCountList,
                        itemStyle: {
                            color: function (params) {
                                // 根据数据调整颜色
                                var colorList = ['#E6F2FF', '#B0C4DE', '#87CEEB', '#89CFF0', '#6495ED'];
                                return colorList[params.dataIndex]
                            },
                            borderColor: '#000',
                            borderWidth: 1,
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            shadowOffsetX: 3,
                            shadowOffsetY: 3
                        }
                    },
                    {
                        name: "总数量",
                        type: "bar",
                        data: this.billsUnit_data.productCountUnitList,
                        itemStyle: {
                            color: function (params) {
                                // 根据数据调整颜色
                                var colorList = ['#E6F2FF', '#B0C4DE', '#87CEEB', '#89CFF0', '#6495ED'];
                                return colorList[params.dataIndex]
                            },
                            borderColor: '#000',
                            borderWidth: 1,
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            shadowOffsetX: 3,
                            shadowOffsetY: 3
                        }
                    },
                    {
                        name: "总金额",
                        type: "bar",
                        data: this.billsUnit_data.totalPriceList,
                        itemStyle: {
                            color: function (params) {
                                // 根据数据调整颜色
                                var colorList = ['#E6F2FF', '#B0C4DE', '#87CEEB', '#89CFF0', '#6495ED'];
                                return colorList[params.dataIndex]
                            },
                            borderColor: '#000',
                            borderWidth: 1,
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            shadowOffsetX: 3,
                            shadowOffsetY: 3
                        }
                    },
                ],
            };
            myChart.setOption(option);
        },

    }
};
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body {
    background: linear-gradient(135deg, #0f1621 0%, #1c2331 100%);
    color: #e0e0e0;
    min-height: 100vh;
    padding: 20px;
}

.container {
    max-width: 100%;
    margin: 0 auto;
}

.header {
    text-align: center;
    padding: 15px 0;
    margin-bottom: 25px;
    background: rgba(255, 255, 255, 0.05);
}

.header h1 {
    font-size: 2.5rem;
    background: linear-gradient(90deg, #42b4e6, #3483b5, #6a79ff);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 10px rgba(66, 180, 230, 0.3);
    letter-spacing: 2px;
}

.header p {
    color: #a0a0b0;
    margin-top: 8px;
    font-size: 1.1rem;
}

.dashboard {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.chart-container {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 30px;
}

.chart-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.chart-title {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #42b4e6;
    text-align: center;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(66, 180, 230, 0.4);
}

.chart {
    width: 100%;
    height: 350px;
    flex-grow: 1;
}

.stats-bar {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
    text-align: center;
}

.stat-card {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    padding: 20px;
    /* min-width: 200px;
    width: 100%; */
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 15px;
    display: flex;
}

.stat-value {
    text-align: center;
    justify-self: center;
    font-size: 2.2rem;
    font-weight: bold;
    color: #42b4e6;
    /* margin: 10px 0; */
    text-shadow: 0 0 10px rgba(66, 180, 230, 0.4);
}

.stat-label {
    margin: 0 20px 0 20px;
    color: #5a5a72;
    font-size: 0.9rem;
}

.trend {
    font-size: 0.85rem;
    /* margin-top: 5px; */
}

.trend.up {
    color: #40ce66;
}

.trend.down {
    color: #f87f4c;
}

.footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    color: #a0a0b0;
    font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .dashboard {
        grid-template-columns: 1fr;
    }

    .stats-bar {
        flex-direction: column;
        align-items: center;
    }

    .stat-card {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .header h1 {
        font-size: 2rem;
    }

    .chart {
        height: 300px;
    }
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chart-container {
    animation: fadeIn 0.6s ease-out forwards;
}

.chart-container:nth-child(2) {
    animation-delay: 0.2s;
}

.chart-container:nth-child(3) {
    animation-delay: 0.4s;
}

.chart-container:nth-child(4) {
    animation-delay: 0.6s;
}
</style>